<template>
  <div class="child">
    <ul class="list-group">
      <li class="list-item" v-for="item in props.list" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({ // defineProps专门用来解析父组件传递的数据
  list: {
    type: Array,
    default: () => []
  }
})
</script>

<style>
.child{
  width: 270px;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-item{
  background: #fff;
  height: 30px;
  line-height: 30px;
  padding: 2px 10px;
  border: 1px solid #eee;
  text-align: left;
}
</style>